<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            text-align: center;
        }
        #chat-box {
            width: 50%;
            height: 300px;
            border: 1px solid #ccc;
            background: #fff;
            overflow-y: auto;
            margin: 20px auto;
            padding: 10px;
            text-align: left;
        }
        #message {
            width: 40%;
            padding: 10px;
        }
        button {
            padding: 10px;
            background: #28a745;
            color: #fff;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h2>WebSocket 聊天室</h2>
    <div id="chat-box"></div>
    <input type="text" id="message" placeholder="输入消息">
    <button onclick="sendMessage()">发送</button>

    <script>
        let ws = new WebSocket("ws://119.91.225.254:8888"); // 替换为你的服务器IP

        ws.onopen = () => {
            console.log("✅ 已连接到服务器");
            addMessage("🔵 连接成功！");
        };

        ws.onmessage = (event) => {
            addMessage("👤 朋友：" + event.data);
        };

        ws.onclose = () => {
            addMessage("🔴 连接断开！");
        };

        function sendMessage() {
            let msg = document.getElementById("message").value;
            if (msg.trim() !== "") {
                ws.send(msg);
                addMessage("🟢 你：" + msg);
                document.getElementById("message").value = "";
            }
        }

        function addMessage(text) {
            let div = document.createElement("div");
            div.textContent = text;
            document.getElementById("chat-box").appendChild(div);
        }
    </script>
</body>
</html>
